{% extends "base.html" %}

{% block title %}用户信息编辑 - 告警系统{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header mb-4">
        <h1>用户信息编辑</h1>
        <p class="lead">管理您的账户信息</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-body">
                    {% if errors %}
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                {% for error in errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    {% if error %}
                        <div class="alert alert-danger">{{ error }}</div>
                    {% endif %}
                    
                    {% if success %}
                        <div class="alert alert-success">{{ success }}</div>
                    {% endif %}
                    
                    <form method="post" class="needs-validation" novalidate>
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" 
                                   name="username" value="{{ UserName }}" readonly>
                            <div class="form-text">用户名不可修改</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="realname" class="form-label">真实姓名</label>
                            <input type="text" class="form-control" id="realname" 
                                   name="realname" value="{{ RealName if RealName else '' }}"maxlength="20">
                            <div class="invalid-feedback">请输入真实姓名（不超过10位）</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="contact" class="form-label">联系方式</label>
                            <input type="text" class="form-control" id="contact" 
                                   name="contact" value="{{ Contact }}" 
                                   placeholder="手机号或邮箱" maxlength="15">
                        </div>
                        
                        <div class="mb-3">
                            <label for="password" class="form-label">修改密码</label>
                            <input type="password" class="form-control" id="password" 
                                   name="password" placeholder="留空则不修改">
                            <div class="form-text">密码至少6位字符</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="confirm_password" class="form-label">确认密码</label>
                            <input type="password" class="form-control" id="confirm_password" 
                                   name="confirm_password" placeholder="留空则不修改">
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-save me-2"></i>保存更改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表单验证
(() => {
  'use strict'
  
  const forms = document.querySelectorAll('.needs-validation')
  
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>
{% endblock %}